<template>
  <view class="merchandise_box" :class="!shopShow ? 'tl-show' : ''">
    <view class="sptp">
      <!-- 图片轮播 -->
      <view class="slideshow uni-margin-wrap" v-if="vsIndex === 0">
        <swiper style="height: 375px !important" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay"
          :interval="interval" :duration="duration" @change="swiperChange">
          <swiper-item v-for="(item, index) in slideshowData" :key="index">
            <image class="swiper-item" mode="widthFix" :src="item" />
          </swiper-item>
        </swiper>
        <view class="swiper_number">
          <span>{{ swiperIndex }}</span>/<span>{{ slideshowData.length }}</span>
        </view>
      </view>
    </view>
    <view class="shop_conts">
      <view class="spxx">
        <view class="jg">
          <span class="sp1">¥<span>{{ spData.vipPrice }}</span>/{{ spData.size ? spData.size : '斤' }}</span>
          <span class="sp2">{{ spData.limitNum }}{{ spData.size }}起</span>
        </view>
        <view class="jj">
          {{ spData.name }}
        </view>
        <!-- <view class="jj js">
          {{ spData.description }}
        </view> -->
        <view class="numbers">
          <view>
            <span>已售：</span>
            <span>{{ spData.sales }}</span>
          </view>
          <view>
            <span>剩余：</span>
            <span>{{ spData.stock }}</span>
          </view>
        </view>
      </view>

      <view class="introduce">
        <view class="titles">
          <view class="lefs"></view>
          详情介绍
          <view class="rig"></view>
        </view>
        <view class="zstp">
          <rich-text style="margin: 0 10px" class="ql-editor" :nodes="spData.info"></rich-text>
        </view>
      </view>
    </view>

    <!-- 立即抢购 -->
    <view class="buts" v-if="memberData == 'mj'">
      <view class="service" @click="toggle">
        <span class="sp1">
          ¥
          <span>{{ spData.vipPrice }}</span>
        </span>
        <span class="sp2">立即抢购</span>
      </view>
    </view>

    <!-- 规格 -->
    <!-- 普通弹窗 -->
    <view class="popup">
      <uni-popup ref="popup" background-color="#fff" @change="change">
        <view class="specification">
          <view class="xx">
            <image style="width: 120rpx; height: 120rpx; border-radius: 10px" mode="widthFix" :src="spData.image" />
            <view class="rigs">
              <view class="jgkc">
                <view class="jg">
                  <span class="sp1">
                    ¥<span>{{ spData.vipPrice }}</span> /{{ spData.size || '斤' }}
                  </span>
                  <span class="sp2"> {{ spData.limitNum }}{{ spData.size }}起 </span>
                </view>
                <view>库存：{{ spData.stock }}</view>
              </view>
              <view class="names">
                {{ spData.name }}
              </view>
            </view>
          </view>
          <view class="number">
            <view>购买数量/{{ spData.startLabel ? spData.startLabel : '斤' }}</view>
            <view>
              <uni-number-box width="100px" :min="spData.limitNum" :max="spData.stock" :value="spData.number"
                @change="changeNumber" />
            </view>
          </view>
          <view class="btn-area">
            <button type="primary" class="btn" block @click="rob">购买</button>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import { spfindById, queryCommodityId } from '@/utils/api.js';
export default {
  data() {
    return {
      noClick: true,
      memberData: 'mj',
      id: '',
      spData: {
        number: 1,
      },
      base: {},
      sptype: '',

      // 视频图片切换index
      vsIndex: 0,
      // 视频路径
      videoSrc: '',
      showvidos: false,
      fullScreenStatus: false,

      // 轮播参数
      indicatorDots: false,
      autoplay: false,
      interval: 3000,
      duration: 1000,
      swiperIndex: 1,
      // 轮播图数据
      slideshowData: [],

      shopShow: false,
      // 选择的价格
      vipPrice: 0,
      // 详情介绍
      commodityDetails: '',
    };
  },
  onShow() {
    this.memberData = uni.getStorageSync('zhgx_ports');
  },
  onLoad(e) {
    // console.log(e);
    if (e.id) {
      this.id = e.id;
      this.sptype = e.sptype;
    }
    this.spDetails();
  },
  methods: {
    // 获取数据
    spDetails() {
      // 获取商品信息数据
      spfindById({
        id: this.id,
      })
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
            this.spData = { ...res.data.product, number: this.spData.number };

            if (this.spData.limitNum) {
              this.spData.number = this.spData.limitNum;
            }

            if (res.data.product.sliderImage) {
              this.slideshowData = res.data.product.sliderImage.split(',');
              this.slideshowData.push(res.data.product.image);
            } else {
              this.slideshowData.push(res.data.product.image);
            }

            this.videoSrc = res.data.videoUrl;
          } else {
            uni.showToast({ title: res.message, position: 'bottom' });
          }
        })
        .catch((err) => {
          uni.showToast({ title: '网络繁忙', position: 'bottom' });
        });
    },
    // 视频图片切换
    vscut(index) {
      this.vsIndex = index;
    },
    // 遮罩层点击全屏播放
    spss(videoLists, index) {
      uni.navigateTo({
        url: `/pages/base/videoList/videoList?index=${index}&videoListAll=${encodeURIComponent(
          JSON.stringify(videoLists)
        )}`,
      });
    },
    // 进入和退出全屏时触发
    fullScreen: function (e) {
      if (!this.fullScreenStatus) {
        // console.log('进入全屏');
        this.showvidos = true;
        this.fullScreenStatus = true;
      } else {
        // console.log('退出全屏');
        this.showvidos = false;
        this.videoContext.pause();
        this.videoContext.exitFullScreen();
        this.fullScreenStatus = false;
      }
    },
    // 视频播放错误
    videoErrorCallback: function (e) {
      uni.showModal({
        content: e.target.errMsg,
        showCancel: false,
      });
    },
    // 轮播图滑动
    swiperChange(e) {
      this.swiperIndex = e.detail.current + 1;
    },
    // 当前规格弹框状态
    change(e) {
      this.shopShow = true;
    },
    // 显示规格弹框
    toggle() {
      this.$refs.popup.open();
    },
    // 数量
    changeNumber(value) {
      this.spData.number = value;
    },

    // 查看商户详情
    navigateTo(id) {
      uni.navigateTo({
        url: 'details?id=' + id,
      });
    },
    // 立即抢购
    rob() {
      uni.navigateTo({
        url: `/pages/order/submit?id=${this.spData.id}&number=${this.spData.number}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.merchandise_box {
  .sptp {
    width: 100%;
    height: 375px;
    background-color: #eeeeee;
    position: relative;

    .videoSwiper {
      // width: 140px;
      height: 36px;
      z-index: 80;
      background: rgba($mainDeepText, 0.5);
      border-radius: 18px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 36px;
      text-align: center;
      position: absolute;
      left: 50%;
      bottom: 45px;
      transform: translate(-50%, 0);
      display: flex;

      view {
        width: 70px;
      }

      .vis_actis {
        background: #ffffff;
        border-radius: 18px;
        color: $mainText;
      }
    }

    .video_box {
      width: 100%;
      height: 375px;
      z-index: 1;

      image {
        width: 100%;
        height: 100%;
      }

      ::v-deep uni-video {
        width: 100%;
        height: 100%;
        z-index: 1;
      }
    }

    .slideshow {
      position: relative;
      width: 100%;
      height: 375px;

      ::v-deep uni-swiper {
        height: 375px !important;

        swipe {
          height: 375px !important;
        }
      }

      .swiper-item {
        width: 100% !important;
        height: 100% !important;
      }

      .swiper_number {
        position: absolute;
        right: 20px;
        bottom: 45px;
        width: 50px;
        height: 36px;
        background: rgba($mainDeepText, 0.5);
        border-radius: 18px;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 36px;
        text-align: center;
      }
    }
  }

  .shop_conts {
    z-index: 80;
    position: relative;
    top: -30px;

    .spxx {
      width: 100%;
      height: 185px;
      background-color: #fff;
      border-radius: 20px 20px 0px 0px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      view {
        padding: 0 20px;
      }

      .jg {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        line-height: 40px;

        .sp1 {
          font-size: 14px;
          font-weight: 600;
          color: #ff0000;

          span {
            font-size: 23px;
          }
        }

        .sp2 {
          font-size: 12px;
          font-weight: 400;
          color: #ff0000;
          line-height: 20px;
          // text-decoration:line-through;
          padding: 0 10px;
          margin: 0 10px;
          height: 20px;
          background: rgba(#ff0000, 0.2);
          border-radius: 18px;
        }
      }

      .jj {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 25px;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        /*要显示的行数*/
        -webkit-box-orient: vertical;
      }

      .js {
        font-size: 12px;
        font-weight: 400;
        color: $text;
        line-height: 20px;
        -webkit-line-clamp: 3;
        /*要显示的行数*/
      }

      .numbers {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 12px;
        margin-top: 10px;

        view {
          padding: 0;
        }
      }
    }

    .select {
      margin-top: 20rpx;

      .sele_li {
        height: 50px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        .txt {
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 600;
          color: $mainText;
          line-height: 21px;
          margin-left: 40rpx;
        }

        .rig {
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 16px;
          margin-right: 40rpx;
          display: flex;
          align-items: center;

          span {
            margin-right: 10rpx;
          }

          .sp2 {
            color: $mainText;
          }
        }
      }
    }

    // 门店详情
    .tenant {
      // width: 100%;
      padding: 0 20px 10px 20px;
      background-color: #fff;
      margin-top: 10px;

      .titles {
        font-size: 20px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $mainText;
        line-height: 60px;
      }

      .lists {
        width: 100%;

        .list_xx {
          width: 100%;
          height: 110px;
          display: flex;

          image {
            width: 100px;
            height: 100px !important;
            border-radius: 8px;
          }

          .message {
            width: 64%;
            height: 110px;
            padding: 0 10px;
            display: flex;

            .content {
              width: 80%;
              height: 100%;

              text {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                color: $mainText;
                // line-height: 35px;
                font-weight: bold;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                /*要显示的行数*/
                -webkit-box-orient: vertical;
              }

              view {
                width: 100%;
                font-size: 13px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: $text;
                line-height: 25px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .dzs {
                margin-top: 5px;
              }
            }

            .distance {
              width: 20%;
              height: 100%;
              font-size: 13px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }

    .pickupaddress {
      padding: 10px 20px;
      background-color: #fff;
      margin-top: 10px;

      .txt {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: $mainText;
        line-height: 30px;
      }

      .address {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $text;
        line-height: 23px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        view:nth-child(1) {
          width: 80%;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          /*要显示的行数*/
          -webkit-box-orient: vertical;
        }
      }
    }

    .delivery {
      padding: 10px 20px;
      background-color: #fff;
      margin-top: 10px;

      .del_li {
        height: 50px;
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .introduce {
      padding-bottom: 80px;

      .titles {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 50px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;

        view {
          width: 60rpx;
          height: 2px;
          background: #d8d8d8;
          border-radius: 2px;
          margin: 0 40rpx;
        }
      }

      .zstp {
        width: 100%;

        // background-color: #fff;
        // image{
        // 	width: 100%;
        // 	height: 750rpx;
        // }
        .ql-align-center {
          text-align: center;
        }

        .ql-align-right {
          text-align: right;
        }

        .ql-align-left {
          text-align: left;
        }
      }
    }
  }

  // 抢购
  .buts {
    width: 100%;
    height: 56px;
    z-index: 100;
    position: fixed;
    bottom: 5%;

    .service {
      width: 90%;
      height: 56px;
      margin: 0 auto;
      background: linear-gradient(232deg, #b9d378 0%, #1b9a5d 100%);
      box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
      border-radius: 28px;
      display: flex;
      justify-content: center;
      align-items: center;

      .sp1 {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 56px;

        span {
          font-size: 23px;
        }
      }

      .sp2 {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 56px;
        padding: 0 5px;
      }
    }
  }

  .specification {
    max-height: 1080rpx;
    min-height: 620rpx;
    padding: 40rpx 40rpx 80rpx 40rpx;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    .xx {
      display: flex;

      // align-items: baseline;
      .rigs {
        width: 80%;

        .jgkc {
          display: flex;
          justify-content: space-between;
          align-items: center;

          view:nth-child(1) {
            margin-left: 20rpx;
            font-size: 15px;
            line-height: 36px;
            font-weight: 600;
            color: #ff0000;
            font-family: PingFangSC-Medium, PingFang SC;

            .sp1 {
              font-size: 14px;
              font-weight: 600;
              color: #ff0000;

              span {
                font-size: 23px;
              }
            }

            .sp2 {
              font-size: 12px;
              font-weight: 400;
              color: #ff0000;
              line-height: 20px;
              // text-decoration:line-through;
              padding: 0 10px;
              margin: 0 10px;
              height: 20px;
              background: rgba(#ff0000, 0.2);
              border-radius: 18px;
            }
          }

          view:nth-child(2) {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 16px;
          }
        }

        .names {
          margin-left: 20rpx;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $mainText;
          line-height: 17px;
        }
      }
    }

    .speci_list {
      margin-top: 40rpx;

      .titls {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: $mainText;
        line-height: 30px;
      }

      .list {
        max-height: 720rpx;
        // min-height: 450rpx;
        overflow-x: hidden;
        overflow-y: scroll;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        view {
          height: 52rpx;
          background: #f5f5f5;
          border-radius: 13px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $mainText;
          line-height: 52rpx;
          margin: 0 20rpx 20rpx 0;
          padding: 0 20rpx;

          span {
            margin-left: 10px;
          }
        }

        .view_active {
          background: linear-gradient(232deg, #1c975c 0%, #1b9a5d 100%);
          color: #ffffff;
        }
      }

      .list::-webkit-scrollbar {
        display: none;
      }
    }

    .number {
      width: 100%;

      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
    }

    .btn-area {
      flex: 1;
      width: 100%;
      min-height: 80rpx;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-end;
      align-items: center;

      gap: 24rpx;

      .btn {
        width: 100%;
      }
    }
  }
}

.tl-show {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
}
</style>
